<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div style="width: 30%; float: left">
          <a-space direction="vertical" style="width: 100%; margin-left: 13px">
            <a-input-group compact>
              <a-cascader
                v-model:value="value18"
                style="width: 100%"
                :options="options1"
                expand-trigger="hover"
                placeholder="请选择行政区"
                changeOnSelect
                @change="onChange"
              />
            </a-input-group>
          </a-space>
        </div>
        <div style="width: 20%; float: left; margin-top: 15px; margin-left: 25px">
          <a-form-item name="fwzt" style="margin-bottom: 0px">
            <a-select v-model:value="fwzt" placeholder="请选择房屋状态">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="已拆除">已拆除</a-select-option>
              <a-select-option value="不出租">不出租</a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div
          style="width: 20%; float: left; margin-top: 15px; margin-left: 25px; margin-bottom: 15px"
        >
          <a-input-search
            v-model:value="txtKeyWord"
            placeholder="请输入姓名、地址或房屋编号进行查询"
            enter-button
            style="width: 100%"
            @search="searchBtn"
          />
        </div>
        <div style="float: left; width: 27%">
          <a-space style="float: right; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space>
        </div>
      </div>
      <a-table
        style="margin-top: 0px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      >
        <!-- vue3 中的写法 -->
        <template #headerCell="{ column }">
          <template v-if="column.key == 'xzq'">
            <Tooltip placement="top">
              <template #title>
                <span>区名称</span>
              </template>
              <span> 区名称 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'town'">
            <Tooltip placement="top">
              <template #title>
                <span>街/乡镇名称</span>
              </template>
              <span> 街/乡镇名称 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'village'">
            <Tooltip placement="top">
              <template #title>
                <span>村/社区</span>
              </template>
              <span> 村/社区 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'hzxm'">
            <Tooltip placement="top">
              <template #title>
                <span>用户姓名</span>
              </template>
              <span> 用户姓名 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'address'">
            <Tooltip placement="top">
              <template #title>
                <span>地址</span>
              </template>
              <span> 地址 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'fwbh'">
            <Tooltip placement="top">
              <template #title>
                <span>房屋编号</span>
              </template>
              <span> 房屋编号 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'fwzt'">
            <Tooltip placement="top">
              <template #title>
                <span>房屋状态</span>
              </template>
              <span> 房屋状态 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'create_on'">
            <Tooltip placement="top">
              <template #title>
                <span>添加时间</span>
              </template>
              <span>添加时间</span>
            </Tooltip>
          </template>
        </template>
      </a-table>
      <div class="pagination" style="float: right">
        <a-pagination
          show-size-changer
          :show-total="(total) => `共有 ${total} 条记录`"
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { getHourseRomoveList, getRegion } from '/@/api/demo/system'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
//   import Detail from './component/detailDrawer.vue';
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  let userInfo = ref<any>(null);
  let detailTableHeight = ref<number>(0); // 表格高度
  let options1 = ref<any[]>([]);
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(15);
  const value18 = ref<string[]>([]);
  let txtKeyWord = ref<string>('');
  let fwzt = ref<string>('');
  let total = ref(0);
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
    total: number;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 80,
    },
    {
      title: '区名称',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
      width: 80,
    },
    {
      title: '街/乡镇名称',
      dataIndex: 'town',
      key: 'town',
      align: 'center',
      width: 130,
    },
    {
      title: '村/社区名称',
      dataIndex: 'village',
      key: 'village',
      align: 'center',
      width: 200,
    },
    {
      title: '用户姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 250,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 350,
    },
    {
      title: '房屋编号',
      dataIndex: 'fwbh',
      key: 'fwbh',
      align: 'center',
      width: 200,
    },
    {
      title: '房屋状态',
      dataIndex: 'fwzt',
      key: 'fwzt',
      align: 'center',
      width: 200,
    }
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
// 表格的 ref Dom名称
  let { tableData, loading, currentqx, currentTitle } = toRefs(data);
  async function getData() {
    let params: iParams = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      txtKeyWord: txtKeyWord.value,
      fwzt: fwzt.value,
    };
    if (value18.value != undefined) {
      params.xzqdm = value18.value[0];
      params.towndm = value18.value[1];
      params.villagedm = value18.value[2];
    }
    loading.value = true;
    let res: any = await getHourseRomoveList(params);
    console.log('@res--工作进入汇总表', res.items);

    if (res || res.items.length > 0) {
      loading.value = false;
      data.tableData = [...res.items];
      total.value = res.total;
    }
  }

  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }

  function searchBtn() {
    data.loading = true;
    getData();
  }

  async function getRegionData() {
    let res: any = await getRegion();
    options1.value = res;
  }
  function onChange(value) {
    value18.value = value;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    let xzqdm = '';
    let towndm = '';
    let villagedmdm = '';
    if (value18.value[0] != undefined) {
      xzqdm = value18.value[0];
    }
    if (value18.value[1] != undefined) {
      towndm = value18.value[1];
    }
    if (value18.value[2] != undefined) {
      villagedmdm = value18.value[2];
    }
    let val = txtKeyWord.value;
    let strFwzt = fwzt.value;
    downloadByUrl({
      url:
        uriBase +
        '/village/evolvestatic/ExportHouseRemoveList?access_token=' +
        tk +
        '&txtKeyWord=' +
        val +
        '&fwzt=' +
        strFwzt +
        '&xzqdm=' +
        xzqdm +
        '&towndm=' +
        towndm +
        '&villagedm=' +
        villagedmdm,
      target: '_blank',
    });
  }

  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******工作进展统计初始化******');
    getRegionData();
    getData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
